<template>
  <div class="Register">
    <el-row class="top">
      <el-steps :active="step">
        <el-step icon="el-icon-edit"  title="填写账户信息"></el-step>
        <el-step icon="el-icon-finished"  title="注册成功"></el-step>
      </el-steps>
    </el-row>
    <el-row class="content">
      <div class="contentForm" v-if="!toLogin">
        <div class="box box1">
          <label for="username">用户名</label>
          <input type="text"  id="username" placeholder="您的账户名和登录名" v-model="username">
        </div>
        <div class="box box2">
          <label for="password">设置密码</label>
          <input type="password" id="password" placeholder="您的密码" v-model="password">
        </div>
        <div class="box box3">
          <label for="rePassword">确认密码</label>
          <input type="password" id="rePassword"  placeholder="请再次输入密码" v-model="rePassword">
        </div>
        <button @click="register">立即注册</button>
      </div>
      <div class="toLogin" v-if="toLogin">
        <el-button type="success"><router-link tag="li"  :to="{name:'Login'}"> 前往登录</router-link></el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
    export default {
        name: "Register",
        data(){
          return{
            step:1,
            toLogin:false,
            username:"",
            password:"",
            rePassword:""
          }
        },
        mounted(){
          this.step=1;
        },
        methods: {
          register() {
            console.log(this.username + "," + this.password + "," + this.rePassword);
            if (this.password != this.rePassword) {
              this.$notify({
                title: '警告',
                message: '两次密码不一致',
                type: 'warning'
              });
              return;
            }
              if (this.password.length < 6) {
                this.$notify({
                  title: '警告',
                  message: '请至少输入6位密码',
                  type: 'warning'
                });
                return;
              }
            this.$axios({
              url:'http://47.92.167.153:8085/index/regist',
              method:'post',
              data:{
                password:this.password,
                username:this.username
              }
            }).then((res)=>{
              let re=res.data;
              if(re.success){
                this.step=2;
                this.toLogin=!this.toLogin;
              }else{
                this.$notify({
                  title: '警告',
                  message: re.data.msg,
                  type: 'warning'
                });
              }
            }).catch(function(error){
              console.log(error)
            })
            }
          }
    }
</script>

<style scoped lang="stylus">
.Register
  width 360px
  height 430px
  margin 120px auto 50px
  .content
    width 360px
    height 300px
    margin-top 30px
    .contentForm
      width:360px;
      .box
        width:360px;
        height:50px;
        border:1px solid rgb(221, 221, 221);
        margin-bottom: 36px;
        >label
          display: inline-block;
          width:88px;
          height:50px;
          color: #757575
          text-align: center;
          line-height: 50px;
        >input
          height:48px;
      >button
        width: 360px;
        height:55px;
        background:#00D282;
        color:#FFFFF1;
        font-size: 16px;
    .toLogin
      position relative
      .el-button
        background-color #00D282;
        position absolute
        left 50%
        margin-left -70px

</style>
